<template>
	<div>
		<nav-bar titleT="activity.vip-rewards" isGoback />
		<level-panel
			v-if="accountStore.isLogin"
			:item="panelItem"
			:level="levelPanelData"
			style="margin-top: 20px" />
		<NoLoginBanner v-else />
	</div>

	<div class="mt-10">
		<rewards-list />
	</div>
	<RewardsIllustrate :list="illustrateRewardList" type="reward" />
	<RewardsIllustrate :list="illustrateWelfareList" type="welfare" />

	<div class="mt-10">
		<div class="flex items-center gap-1">
			<base-icon name="betslip" class="text-[26px]" color="#7864ff" />
			<p class="text-lg text-t-1">{{ $t('vip.levelbenefits') }}</p>
		</div>
		<VipTable />
	</div>
	<Question />
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'

import {
	useAccountStore,
	useActivityStore,
	useAppStore,
	useProfileStore,
	useWalletStore
} from '@/store'
import { BaseIcon } from '@/components/base'
import NavBar from '@/components/base/nav-bar/index.vue'
import { useRoute } from 'vue-router'
import VipTable from '@/views/activity/components/vip-table/index.vue'
// import VipBenefits from '@/views/activity/components/vip-benefits/index.vue'
// import BenefitsTable from '@/views/activity/components/table-benefits/index.vue'
// import TableRequirements from '@/views/activity/components/table-requirements/index.vue'
import LevelPanel from '@/views/activity/components/level-panel/index.vue'
import NoLoginBanner from '@/views/activity/components/no-login-banner/index.vue'
// import { TAB_LIST } from '@/views/activity/vip/data.ts'
import RewardsList from '@/views/activity/components/rewards-list/index.vue'
import RewardsIllustrate from '@/views/activity/components/rewards-illustrate/index.vue'
import Question from '@/views/activity/components/question/index.vue'
import { t } from '@/utils'
import { debounce } from 'lodash-es'
// import { Currency } from '@/enums'
// import { UpAmount } from '@/components/up'

const illustrateWelfareList: any = [
	{
		img: 'icon-1.svg',
		title: 'vip.welfare.freeWithdrawal',
		content: 'vip.welfare.freeWithdrawalDesc'
	},
	{
		img: 'icon-2.svg',
		title: 'vip.welfare.vipSupport',
		content: 'vip.welfare.vipSupportDesc'
	},
	{
		img: 'icon-3.svg',
		title: 'vip.welfare.expBonus',
		content: 'vip.welfare.expBonusDesc'
	},
	{
		img: 'icon-4.svg',
		title: 'vip.welfare.promoBonus',
		content: 'vip.welfare.promoBonusDesc'
	}
]
const illustrateRewardList: any = [
	{
		img: 'rebates.png',
		title: 'vip.rewards.instantRebate',
		content: 'vip.rewards.instantRebateDesc'
	},
	{
		img: 'level.png',
		title: 'vip.rewards.levelUpBonus',
		content: 'vip.rewards.levelUpBonusDesc'
	},
	{
		img: 'weekly.png',
		title: 'vip.rewards.weeklyBonus',
		content: 'vip.rewards.weeklyBonusDesc'
	},
	{
		img: 'group.png',
		title: 'vip.rewards.monthlyBonus',
		content: 'vip.rewards.monthlyBonusDesc'
	},
	{
		img: 'bonus.png',
		title: 'vip.rewards.loyaltyBonus',
		content: 'vip.rewards.loyaltyBonusDesc'
	},
	{
		img: 'pouch.png',
		title: 'vip.rewards.lossbackBonus',
		content: 'vip.rewards.lossbackBonusDesc'
	},
	{
		img: 'bet.png',
		title: 'vip.rewards.copyBetRebate',
		content: 'vip.rewards.copyBetRebateDesc'
	}
]

/*const TAB_LIST: any = [
	{
		id: 'requirements',
		name: 'rewards.vip.vipRequirements'
	},
	{
		id: 'benefits',
		name: 'rewards.vip.vipBenefits'
	}
]*/

const route = useRoute()
const appStore = useAppStore()

const bannerSrc = computed(() =>
	appStore.lang === 'en' ? 'activity/banner-en.png' : 'activity/user-right-banner.png'
)

const PANEL_REQUIREMENTS_LIST: any = {
	requirements: {
		content: computed(() => t('rewards.panelBenefitsContent')),
		img: 'activity/banner-benefit.png',
		icon: 'activity/star-level.svg',
		ableBet: true,
		link: 'rewards-vip-xp'
	},
	benefits: {
		// content: computed(
		// 	() =>
		// 		t('rewards.panelRequirementsContent') +
		// 		t('rewards.sportsStake', {
		// 			amount: fmtAmount(useActivityStore().upgradeRule.vip.sport.left, {
		// 				useName: true,
		// 				precision: [0, true]
		// 			}),
		// 			xp: useActivityStore().upgradeRule.vip.sport.right
		// 		}) +
		// 		// t('rewards.sportsStake') +
		// 		t('rewards.slotsStake', {
		// 			amount: fmtAmount(useActivityStore().upgradeRule.vip.slot.left, {
		// 				useName: true,
		// 				precision: [0, true]
		// 			}),
		// 			xp: useActivityStore().upgradeRule.vip.slot.right
		// 		}) +
		// 		t('rewards.casinoStake', {
		// 			amount: fmtAmount(useActivityStore().upgradeRule.vip.casino.left, {
		// 				useName: true,
		// 				precision: [0, true]
		// 			}),
		// 			xp: useActivityStore().upgradeRule.vip.casino.right
		// 		})
		// ),
		img: bannerSrc,
		icon: 'activity/vip-level.svg',
		ableBet: false,
		link: 'rewards-vip-xp'
	}
}

const accountStore = useAccountStore()
const activityStore = useActivityStore()
const profileStore = useProfileStore()
const walletStore = useWalletStore()

const tab = ref(typeof route.params.id === 'string' ? route.params.id || 'benefits' : 'benefits')
const panelItem = ref(PANEL_REQUIREMENTS_LIST[tab.value])
const levelPanelData = computed(() => ({
	...activityStore.vipPanel(),
	next: {
		...activityStore.vipPanel().next,
		icon: activityStore.vipList.find(({ level }) => activityStore.vipPanel().next.level === level)
			?.logo
	}
}))

/*const handleTab = (data: any) => {
	tab.value = data
	panelItem.value = PANEL_REQUIREMENTS_LIST[data]
}*/

const getConfig = async () => {
	await Promise.all([
		// activityStore.getRewardsConfig(),
		// activityStore.getUpgradeRule('vip'),
		// !accountStore.isLogin && activityStore.getBonusActivities(),
		// activityStore.getVipList(),
		activityStore.vipPanel()
	])
}

const updateUser = async () => {
	try {
		if (accountStore.isLogin) {
			await Promise.all([
				profileStore.getUserInfo(),
				activityStore.getUserUpgradeInfo()
				// activityStore.getBonusActivities(),
				// activityStore.getProgressiveData(),
				// activityStore.getRewardsStat()
			])
		}
	} catch (err) {
		console.log(err)
	}
}

watch(
	() => accountStore.isLogin,
	() => updateUser()
)

const debounceUpdateUser = debounce(() => updateUser(), 15000, { leading: true })
watch(
	() => Number(walletStore.balance),
	(value) => value > 0 && debounceUpdateUser(),
	{ immediate: true }
)

onMounted(() => {
	Promise.all([getConfig(), updateUser()])
})

/*const vipBenefitList = computed(() => [
	{
		name: 'first-deposit',
		title: t('vipBenefits.firstTimeDepositBonus'),
		content:
			'5' in useActivityStore().activitiesObj
				? t('rewards.vipBenefits.firstTimeDepositBonusContent', {
						amount: fmtAmount(useActivityStore().activitiesObj[5]?.maxBonus, { useName: true }),
						percentage: percentage(useActivityStore().activitiesObj[5]?.maxBonusPercentage)
					})
				: t('rewards.vipBenefits.firstTimeDepositBonusContentOld', {
						amount: fmtAmount(useActivityStore().activitiesObj[2]?.maxBonus, { useName: true }),
						percentage: percentage(useActivityStore().activitiesObj[2]?.maxBonusPercentage, true),
						// 存款流水始终为 1 倍。 奖金流水才是10倍8倍这样的
						toMultiplier: 1
					}),
		link: 'rewards-bonus-ftd-predeposit',
		isComingSoon: false,
		isShow:
			!accountStore.isLogin ||
			'5' in useActivityStore().activitiesObj ||
			'2' in useActivityStore().activitiesObj,
		buttonText: ''
	},
	{
		name: 'reload-bonus',
		title: t('vipBenefits.reloadBonus'),
		content: t('vipBenefits.reloadBonusContent', { percentage: '500%' }),
		link: 'rewards-bonus-reload-before-deposit',
		isComingSoon: false,
		isShow: true,
		buttonText: ''
	},
	{
		name: 'level-up-bonus',
		title: t('vipBenefits.levelUpBonus'),
		content: t('vipBenefits.levelUpBonusContent'),
		link: 'rewards-bonus-levelup',
		isComingSoon: false,
		isShow: true,
		buttonText: ''
	},
	{
		name: 'weekly-bonus',
		title: t('vipBenefits.weeklyBonus'),
		content: t('vipBenefits.weeklyBonusContent'),
		link: '',
		isComingSoon: false,
		isShow: true,
		buttonText: ''
	},
	{
		name: 'weekly-cashback',
		title: t('vipBenefits.weeklyCashback'),
		content: t('vipBenefits.weeklyCashbackContent'),
		link: 'rewards-cashback',
		isComingSoon: false,
		isShow: true,
		buttonText: ''
	},
	{
		name: 'rebates',
		title: t('vipBenefits.rebates'),
		content: t('vipBenefits.rebatesContent'),
		link: '',
		isComingSoon: false,
		isShow: true,
		buttonText: ''
	}
])*/

/*const REQUIREMENTS_LIST = ref([
	{
		name: 'vip-xp-boost',
		title: t('vipRequirements.xpBoost'),
		content: t('vipRequirements.xpBoostContent'),
		link: '',
		isComingSoon: true,
		buttonText: '',
		isShow: true
	},
	{
		name: 'vip-transfer',
		title: t('vipRequirements.vipTransfer'),
		// content: t('vipRequirements.vipTransferContent', { livechat: t('vipRequirements.liveChat') }),
		content: 'vipRequirements.vipTransferContent',
		translation: true,
		// translationKey: 'livechat',
		link: '',
		isComingSoon: false,
		buttonText: '',
		isShow: true
	}
])*/
</script>

<style scoped>
:deep(.n-progress-content) {
	position: relative;
}

:deep(.n-progress-icon.n-progress-icon--as-text) {
	position: absolute;
	bottom: 100%;
	right: 0;
	color: var(--color-success);
	width: auto !important;
}
</style>
